<template>
  <div>
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card class="card-left" shadow="never">
            <div>
              <el-tree
                ref="tree"
                class="filter-tree"
                :data="factorTreeData"
                :props="defaultProps"
                highlight-current
                default-expand-all
                :expand-on-click-node="true"
                style="height: 100%;"
                @node-click="handleTreeFactorSearch"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-container>
            <el-header height="45px">
              <el-input v-model.trim="factorForm.fuzzy" style="width:320px" placeholder="请输入因子/标准号/检测标准/分析方法" @keyup.enter.native="handleFactorSearch" />
              <el-button type="primary" style="margin-left: 10px" @click="handleFactorSearch">查询</el-button>
            </el-header>
            <el-main class="main-body">
              <el-table
                ref="multipleTable"
                :data="showChoseData"
                stripe
                border
                max-height="450px"
                :header-cell-style="{background:'#ECF3FC'}"
                @select="handleSelectChange"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column prop="className" label="检测对象" width="100px" align="center" />
                <el-table-column prop="factorName" label="检测因子" align="center" />
                <el-table-column prop="standardNo" label="标准号" align="center" />
                <el-table-column prop="standardName" label="标准名称" min-width="130px" align="center" />
                <el-table-column prop="cmaFlg" label="CMA" width="60" align="center">
                  <template slot-scope="{row}">
                    <el-tag :type="row.cmaFlg==='1'?'success':'danger'">{{ row.cmaFlg==='1'?'Y':'N' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="cnasFlg" label="CNAS" width="60" align="center">
                  <template slot-scope="{row}">
                    <el-tag :type="row.cnasFlg==='1'?'success':'danger'">{{ row.cnasFlg==='1'?'Y':'N' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="analysisMethod" label="分析方法" align="center" />
                <!--                  <el-table-column prop="MoneyFormat" label="价格" align="center">-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      {{ row.price|MoneyFormat }} 元-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
              </el-table>
            </el-main>
            <el-footer height="45px">
              <pagination
                v-show="factTotal>0"
                :total="factTotal"
                :page.sync="factorForm.pageNumber"
                :limit.sync="factorForm.pageSize"
                @pagination="handleFactorSearch"
              />
            </el-footer>
          </el-container>

        </el-col>
      </el-row>
      <el-divider content-position="left">已选检测因子</el-divider>
      <el-row style="min-height:36px;line-height: 30px">
        <el-col :span="4">
          <span>已选中检测因子:</span>
        </el-col>
        <el-col :span="20">
          <template v-if="choseFatcors && choseFatcors.length > 0">
            <el-tag
              v-for="item in choseFatcors"
              :key="item.id"
              closable
              :disable-transitions="false"
              style="margin:2px 3px"
              @close="handleClose(item)"
            >
              {{ item.factorName }}
            </el-tag>
          </template>
          <template v-else>
            无
          </template>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>

import * as dictServer from '@/api/dict'
import * as factorServer from '@/api/factor'
export default {
  props: ['secdClassIdEdit'],
  data() {
    return {
      factorTreeData: [],
      factTotal: 0,
      factorForm: {
        fuzzy: '',
        classId: '',
        factorName: '',
        pageNumber: 1,
        pageSize: 10
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id'
      },
      showChoseData: [],
      addressArray: [],
      treeNodeInfo: '',
      currentNodeId: '',
      currentNodeName: '',
      choseFatcors: [],
      multipleSelection: [],
      maxTotal: 10
    }
  },
  mounted() {
    this.getTreeClassList()
  },
  methods: {
    getTreeClassList() {
      dictServer.findTreeClasses().then(res => {
        this.factorTreeData = res.result || []
        console.log(this.secdClassIdEdit, 'this.secdClassIdEdit')
        // 如果是修改需要筛选因子
        if (this.secdClassIdEdit) {
          var chooseTcId = this.secdClassIdEdit.slice(0, 3)
          const arr = []
          const secdArr = []
          // 筛选出一级分类
          arr.push(this.factorTreeData.find((v) => {
            return v.id == chooseTcId
          }))
          console.log(arr, 233)
          // 筛选出二级分类
          this.$nextTick(() => {
            secdArr.push(arr[0].children.find((v) => {
              return v.id == this.secdClassIdEdit
            }))
          })

          this.factorTreeData = secdArr
        }
      })
    },
    handleTreeFactorSearch(val, node) {
      this.treeNodeInfo = val
      this.treeNodeId = val.id

      console.log(this.treeNodeInfo, this.treeNodeId)
      // debugger
      //   if (val.id.startsWith('004')) {
      //     this.flag = true
      //   } else {
      //     this.flag = false
      //   }
      if (!val.children || val.children == null) {
        // if (!this.currentNodeId || this.currentNodeId !== val.id) {
        this.addressArray = []
        this.currentNodeId = val.id
        this.currentNodeName = val.name
        this.factorForm.classId = val.id.slice(0, 3)
        this.factorForm.secdClassId = val.id
        this.factorForm.factorName = ''
        this.factorForm.pageNumber = 1
        this.handleFactorSearch()
        // 清空已经选择的信息
        this.choseFatcors = []
        this.multipleSelection = []

        if (val.id === '002001' && this.meanType === '0') {
          this.maxTotal = 1
        } else if (val.id === '004001') {
          this.maxTotal = 2
        } else {
          this.maxTotal = 10
        }
        if (val.id === '002003') { // 厂界无组织/ 环境空气 自动生成5个点位
          this.$nextTick(() => {
            for (var i = 0; i < 4; i++) {
              this.addressArray.push({
                value: '',
                windNum: 3,
                key: Date.now() + i
              })
            }
          })
        } else if (val.id === '002001') {
          this.$nextTick(() => {
            for (var i = 0; i < 3; i++) {
              this.addressArray.push({
                value: '',
                windNum: 3,
                key: Date.now() + i
              })
            }
          })
        }
        // }
        // 为底层的时候
      }
    },
    handleFactorSearch() {
      if (this.currentNodeId && this.currentNodeId.length > 0) {
        factorServer.getFactorListForPage(this.factorForm).then(res => {
          if (res.code === 200) {
            this.showChoseData = res.result.records || []
            this.showChoseData.map((item) => {
              this.$set(item, 'secdClassId', this.treeNodeInfo.id)
              this.$set(item, 'secdClassName', this.treeNodeInfo.name)
            })
            this.factTotal = res.result.total
          }
        })
      }
    },
    handleSelectChange(val, row) {
      // 先判定是否取消
      if (val) {
        if (val.indexOf(row) === -1) {
          const index = this.choseFatcors.findIndex(i => i.id === row.id)
          this.choseFatcors.splice(index, 1)
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val) {
        val.forEach(i => {
          const ob = this.choseFatcors.find(j => j.id === i.id)
          if (!ob) {
            this.choseFatcors.push(i)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.card-left {
    width: 100%;
    min-height: 200px;
    max-height: 518px;
  }
</style>
